Passa al contenuto principale
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

Gestione dei Modelli di Visualizzazione Pubblica

I modelli di visualizzazione pubblica sono la base delle tue visualizzazioni personalizzate. Definiscono il layout, la struttura e gli elementi visivi che verranno applicati alle tue installazioni. Questa guida completa copre tutto, dalla creazione di modelli di base a tecniche di design avanzate.

📋 Panoramica​

Cosa sono i Modelli di Visualizzazione Pubblica?​

I modelli fungono da prototipi riutilizzabili che:

  • 📐 Definiscono layout visivi per le tue visualizzazioni pubbliche
  • 🧩 Organizzano blocchi di contenuto e la loro posizionamento
  • 🎨 Stabilire coerenza di design attraverso più installazioni
  • ⚙️ Abilitano un rapido svolgimento di visualizzazioni standardizzate
  • 🔄 Supportano aggiornamenti facili in tutte le configurazioni collegate

Vantaggi Chiave​

VantaggioDescrizione
🚀 EfficienzaCrea una volta, utilizza in più installazioni
🎯 CoerenzaMantieni standard di design uniformi
🔧 FlessibilitàModifica facilmente senza ricreare da zero

🚀 Introduzione​

Flusso di lavoro del Modello​

  1. 📐 Progetta il Layout - Pianifica la tua struttura visiva
  2. 🎨 Crea il Modello - Costruisci utilizzando l'editor dei modelli
  3. 💾 Salva il Modello - Conserva per riutilizzare nelle installazioni

Requisiti Preliminari​

Prima di creare modelli, assicurati di avere:

  • ✅ Account SmartgridX con le autorizzazioni appropriate
  • ✅ Obiettivi di design chiari per la tua visualizzazione
  • ✅ Requisiti di contenuto (immagini, punti dati, layout)

🎛️ Interfaccia di Gestione dei Modelli​

Accesso al Gestore di Modelli​

infographicimage

Passaggi di navigazione:

  1. Effettua il login nel tuo account SmartgridX
  2. Naviga a 'Visualizzazioni pubbliche' nella barra laterale principale
  3. Clicca sul pulsante 'Modello di Visualizzazione Pubblica' nella pagina di panoramica

Questo apre l'interfaccia di gestione dei modelli dove puoi visualizzare, creare, modificare ed eliminare modelli.

Tabella di Panoramica del Modello​

infographicimage

Azioni disponibili:

  • ➕ Aggiungi - Pulsante verde per avviare la creazione del modello
  • ✏️ Modifica - Modifica il design del modello esistente
  • 🗑️ Elimina - Rimuovi modello non utilizzato

🎨 Processo di Creazione del Modello​

Iniziare un Nuovo Modello​

Clicca sul pulsante "Crea Nuovo Modello" per aprire l'interfaccia dell'editor del modello.

Configurazione dell'intestazione del Modello​

infographicimage

Impostazioni del Titolo​

Titolo del Modello:

  • Scopo: Identifica il modello in elenchi e configurazioni
  • Migliori pratiche: Usa nomi descrittivi e specifici per il progetto
  • Esempi: "Factory-KPI-Dashboard", "Energy-Monitoring-Layout", "Multi-Zone-Display"

Configurazione dei Margini​

Le impostazioni dei margini definiscono l'area sicura dai bordi del display:

Slider dei margini (0-100px):

  • 📐 Gamma: 0 a 100 pixel dal bordo del display
  • 🎯 Scopo: Crea spaziature sicure per evitare il taglio del contenuto
  • 📱 Applicazione: Assicura visibilità su vari tipi di display
  • ⚙️ Raccomandazione: Usa 10-20px per display standard, 30-50px per schermi edge-to-edge

Impatto visivo:

  • 0px margine - Il contenuto si estende fino ai bordi del display
  • 50px margine - Il contenuto inizia a 50 pixel da tutti i bordi
  • 100px margine - Massima area sicura con spaziatura del bordo sostanziale

Funzionalità di Salvataggio​

Il 💾 pulsante Salva (angolo in alto a destra) ti consente di salvare il tuo modello attuale.

🧩 Sistema di Layout dei Blocchi​

Comprendere il Sistema a Griglia​

infographicimage

Fondamenti della Griglia​

L'editor dei modelli utilizza un sistema di griglia basato su percentuale 100×100:

Proprietà della Griglia:

  • 📐 Dimensioni: 100 unità di larghezza × 100 unità di altezza
  • 📊 Unità: Valori percentuali (1 unità = 1% della dimensione totale)
  • 🎯 Precisione: Permette un posizionamento e dimensionamento esatti
  • 📱 Reattivo: Si adatta automaticamente a diverse dimensioni dello schermo

Esempi di Layout dei Blocchi​

Configurazione: 100 larghezza × 100 altezza
Risultato: Copertura a schermo intero
Caso d'uso: Visualizzazione singola grande, immagine a schermo intero

┌─────────────────────────────────┐
│                                 │
│         BLOCCO COMPLETO         │
│                                 │
│                                 │
└─────────────────────────────────┘

Manipolazione dei Blocchi​

Aggiunta di Blocchi​

Metodo: Clicca sul pulsante "Aggiungi Blocco" (in alto a destra dell'editor)
Risultato: Nuovo blocco appare con dimensioni predefinite
Prossimi passi: Posiziona e ridimensiona secondo necessità

Posizionamento dei Blocchi​

Trascina e Rilascia:

  • 🖱️ Clicca e tieni premuto su un blocco per spostarlo
  • 📍 Anteprima in tempo reale mostra la posizione mentre trascini
  • 🧲 Allineamento a griglia aiuta con l'allineamento preciso
  • 👁️ Guide visive appaiono per assistere con l'allineamento

Ridimensionamento dei Blocchi​

Maniglia di Ridimensionamento:

  • 📐 Angolo in basso a destra mostra la maniglia di ridimensionamento quando il blocco è selezionato
  • 🔧 Trascina per ridimensionare sia larghezza che altezza simultaneamente
  • 📊 Valori in tempo reale visualizzano le dimensioni correnti

Controlli di Precisione​

infographicimage

Pannello di Posizionamento a Destra​

Quando un blocco è selezionato, il pannello di destra offre:

Controlli di Posizione:

  • 📍 Posizione X - Offset orizzontale dal bordo sinistro (0-100)
  • 📍 Posizione Y - Offset verticale dal bordo superiore (0-100)
  • 🎨 Z-Index - Ordinamento dei livelli per blocchi sovrapposti
  • 📏 Larghezza - Percentuale di larghezza del blocco (1-100)
  • 📏 Altezza - Percentuale di altezza del blocco (1-100)

⚙️ Configurazione del Blocco​

Tipi e Proprietà dei Blocchi​

infographicimage

Accesso alla Configurazione del Blocco​

Metodo:

  1. Seleziona un blocco nella tela dell'editor
  2. Il pannello di configurazione appare in basso allo schermo
  3. Il menu a discesa del tipo di blocco è l'opzione di configurazione principale

Nota: Non tutti i blocchi sono attualmente configurabili. Questo cambierà man mano che lo sviluppo continua. Ulteriori tipi di blocco saranno aggiunti nei futuri aggiornamenti.

Tipi di Blocchi Disponibili​

Scopo: Visualizzare immagini statiche, loghi, sfondi, GIF Opzioni di configurazione:

  • 📁 Fonte dell'immagine - Carica o URL che verrà utilizzato come predefinito per questo blocco. Puoi lasciare questo campo vuoto se desideri forzare la selezione di un'immagine nella configurazione

Casi d'uso:

  • Loghi aziendali e branding
  • Immagini di sfondo
  • Foto dell'attrezzatura
  • GIF

Esempi di Modelli​

immagine-infografica

Questo esempio dimostra un modello ben strutturato con:

  • 📊 Organizzazione chiara dei blocchi con etichette descrittive
  • 📐 Spaziatura e allineamento appropriati
  • 🎯 Tipi di blocco funzionali per diverse esigenze di contenuto

Nomenclatura dei blocchi in questo esempio:

  • Ogni blocco mostra il suo scopo previsto
  • Etichettatura chiara aiuta con la configurazione
  • Organizzazione logica supporta la manutenzione

📚 Documentazione Correlata​

Prossimi Passi​

Dopo aver creato il tuo modello:

  1. ⚙️ Configura Installazioni - Applica modelli a installazioni specifiche
  2. 🎛️ Collega Controller - Connetti per visualizzare l'hardware
  3. 🚀 Guida all'Inizio - Panoramica completa del flusso di lavoro

Argomenti Avanzati​

  • 🎨 Tecniche di Design Avanzate
  • 📊 Integrazione Dati Personalizzati
  • 🔄 Aggiornamenti Automatici dei Modelli
  • 👥 Collaborazione Multi-utente sui Modelli

💡 Riepilogo delle Best Practices​

Design del Modello​

✅ Principi di design:

  • 🎯 Mantieni la semplicità - Concentrati sulle informazioni essenziali
  • 📱 Progetta in modo responsivo - Testa su diverse dimensioni dello schermo
  • 🎨 Mantieni coerenza - Usa colori e layout standardizzati

Gestione del Modello​

✅ Suggerimenti per l'organizzazione:

  • 📝 Usa nomi descrittivi - Rendi i modelli facili da trovare
  • 🔄 Manutenzione regolare - Rimuovi i modelli non utilizzati
  • 👥 Condividi standard - Assicurati la coerenza del team

🎨 Pronto per Progettare? Con il tuo modello creato e configurato, sei pronto a distribuire visualizzazioni straordinarie nelle tue installazioni SmartgridX!